<template>
  <div class="user">
    <el-main>
      <div class="addTop">
        <div>添加部门</div>
        <el-button
          type="primary"
          style="margin-left: 15px"
          size="mini"
          @click="append({ level: 0 })"
        >
          添加
        </el-button>
      </div>
      <el-table
        :data="DepartmentList"
        style="width: 80%; margin-top: 20px"
        row-key="id"
        border
        :tree-props="{ children: 'children' }"
      >
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="Edit(scope.row)" type="primary">修改</el-button>
            <el-button v-if="scope.row.level == 1 "  @click="append(scope.row)" type="primary">添加</el-button>
            <el-button @click="remove(scope.row.id)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        :title="editType ? '编辑' : '添加'"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="部门名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="确认要删除该部门吗" :visible.sync="dialogVisible2" width="30%">
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="delDepartment">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
import {
  userDepartmentList,
  userDepartmentAdd,
  userDepartmentDel,
  userDepartmentEdit,
} from "@/api/configApi";
export default {
  components: {},
  data() {
    return {
      DepartmentList: [],
      dialogVisible: false,
      dialogVisible2: false,
      editType: false,
      delId: "",
      form: {
        name: "",
        pid: 0,
        level: 1,
      },
    };
  },
  async mounted() {
    console.log(this.data, "data");
    this.userDepartmentList();
  },
  methods: {
    userDepartmentEdit() {
      let form = {
        name: this.form.name,
        department_id: this.form.pid,
      };
      userDepartmentEdit(form).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
      });
    },
    Edit(data) {
      this.form.pid = data.id;
      this.form.name = data.name;
      this.dialogVisible = true;
      this.editType = true;
    },
    async delDepartment() {
      await this.userDepartmentDel();
      setTimeout(async () => {
        await this.userDepartmentList();
      }, 50);
      this.dialogVisible2 = false;
    },
    userDepartmentAdd() {
      userDepartmentAdd(this.form).then((res) => {
        this.$message({
          message: "添加成功",
          type: "success",
        });
      });
    },
    userDepartmentList() {
      userDepartmentList().then((res) => {
        this.DepartmentList = res.list;
        this.form = {
          name: "",
          pid: 0,
          level: 1,
        };
      });
    },
    append(data) {
      console.log(data);
      // if (data.level == 1) {
      //   this.form.pid = data.id;
      //   this.form.level = 2;
      // } else {
      //   this.form.pid = 0;
      //   this.form.level = 1;
      // }
      if (data.level) {
        this.form.pid = data.id;
        this.form.level = 2;
      } else {
        this.form.pid = 0;
        this.form.level = 1;
      }
      this.editType = false;
      this.dialogVisible = true;
    },
    userDepartmentDel() {
      userDepartmentDel({
        department_id: this.delId,
      }).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
      });
    },
    remove(id) {
      this.delId = id;
      this.dialogVisible2 = true;
    },
    async addUser() {
      console.log(this.form, "form");
      if (this.editType) {
        await this.userDepartmentEdit();
      } else {
        await this.userDepartmentAdd();
      }
      setTimeout(async () => {
        await this.userDepartmentList();
      }, 50);
      this.cancel();
    },
    cancel() {
      (this.form = {
        name: "",
        pid: 0,
        level: 1,
      }),
        (this.dialogVisible = false);
    },
  },
};
</script>

<style scoped lang="less">
.el-main {
  // margin: 30px 15px;
  padding: 0;
}
.addTop {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
</style>
